<!-- 登录 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>输入取出密码</title>
    <link rel="stylesheet" href="../../assets/css/reset.css" />
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div class="password" id="password">
      <!-- 结构 -->
      <div class="code-box">
        <!-- 该部分展示给用户-  ---使用flex布局 -->
        <div class="code-item"></div>
        <div class="code-item"></div>
        <div class="code-item"></div>
        <div class="code-item"></div>
        <div class="code-item"></div>
        <div class="code-item"></div>
        <!-- 该输入框需要隐藏 -->
        <input type="text" class="code-input" maxlength="6" />
      </div>
    </div>
  </body>
  <script src="../../assets/js/rem.js"></script>
  <script src="../../plugins/vue/vue.js"></script>
  <script>
    window.addEventListener('load', () => {
      // 获取元素
      const codeItem = document.querySelectorAll('.code-item')
      const codeInput = document.querySelector('.code-input')

      // 循环显示input中的值到code-item中
      const showNum = () => {
        // 获取到当前input的值
        const curVal = codeInput.value
        // 循环显示到code-item中
        Array.from(codeItem).map((item, index) => {
          curVal[index]
            ? (item.innerText = curVal[index])
            : (item.innerText = '')
        })
      }

      // 处理active类的增删
      const cutAct = type => {
        // 获取当前input中值的长度
        const valLenth = codeInput.value.length
        // 首先清除之前的active类名
        Array.from(codeItem).map(item => {
          item.className = 'code-item'
        })
        // 当type为focus时 进行计算active位置 否则只清除
        if (type === 'focus') {
          // 计算出当前应该active的code-item 并且给他添加active类名
          // 因为input的值有6个长度，他的长度是从1开始的；
          // 而codeItem位数组，下标为0，从0开始的，所以当input长度为6时，对应的codeItem其实是不存在的 所以我们需要减一
          codeItem[valLenth === 6 ? valLenth - 1 : valLenth].className =
            'code-item active'
        }
      }

      // 为输入框添加事件
      codeInput.addEventListener('focus', () => {
        // 聚焦时 计算active的code-item
        cutAct('focus')
      })

      codeInput.addEventListener('blur', () => {
        // 失去焦点时 移除当前的active
        cutAct('blur')
      })

      codeInput.addEventListener('input', () => {
        // 当输入值时，调用循环显示函数
        showNum()
        cutAct('focus')
      })
    })
  </script>
</html>
